<template>
	<view class="contract uni-flex-column">
		<CustomNavBar class="navbar" title="银行卡">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
			</template>
		</CustomNavBar>

		<view class="content">
			<view class="title-box">
				<text class='title-text'>我的银行卡</text>
				<text class='title-text2'>（{{BankCardList.length}}张）</text>
			</view>

			<view class="BankCard-box">
				<view class="BankCard-bg" v-for="(item,index) in BankCardList" :key='index'
					:style="{backgroundColor:item.bgColor}">
					<view class="card-content">
						<view class="card-content-top">
							<view class="bankLogo-box">
								<image :src="item.iconUrl" class="bank-icon"></image>
							</view>
							<view class="card-content-top-rt">
								<view class="bank-name-box">
									<text class="bank-name">{{item.BankCardName}}</text>
									<text class="card-number">****0912</text>
								</view>
								<text class="card-type">{{item.BankCardType}}</text>
							</view>
						</view>
						<text class='Divider'></text>
						<view class="bankContent-bottom">
							<text class='bankContent-bottom-text' @click="() => queryCardNum(index)">查卡号</text>
							<view class="bankContent-bottom-text-Divider"></view>
							<text class='bankContent-bottom-text' @click='queryBankBill'>查账单</text>
							<view class="bankContent-bottom-text-Divider"></view>
							<text class='bankContent-bottom-text' @click='BandCardManage'>管理</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 将弹出层移到外面，避免重复渲染 -->
			<uni-popup ref="CardNumPopup" type="dialog">
				<view class="popup-content">
					<text class='text'>银行卡号</text>
					<text class='text2'>{{currentCardNumber}}</text>
					<button type="default" class='copyCardNum' @click="copyCardNumber">复制卡号</button>
				</view>
			</uni-popup>

			<button type="default" class='addBankCard' @click="addBankCard">添加其他银行卡</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	import CustomNavBar from "@/components/custom-navbar/index.vue";

	const CardNumPopup = ref(null);
	const currentCardIndex = ref(-1);
	const currentCardNumber = ref('');
	import {
		ImgBaseUrl
	} from '@/utils/domain.js'

	const BankCardList = ref([{
			BankCardName: "中国银行",
			BankCardType: "储蓄卡",
			bgColor: "#FF6266",
			iconUrl: `${ImgBaseUrl}BankofChinaLogo.png`,
			fullCardNumber: '6216 2938 0005 2819 928' // 添加完整卡号
		},
		{
			BankCardName: "招商银行",
			BankCardType: "信用卡",
			bgColor: "#FF6266",
			iconUrl: `${ImgBaseUrl}ChinaMerchantsBankLogo.png`,
			fullCardNumber: '6225 8801 2345 6789 012'
		},
		{
			BankCardName: "兴业银行",
			BankCardType: "信用卡",
			bgColor: "#4A9EFF",
			iconUrl: `${ImgBaseUrl}IndustrialBankLogo.png`,
			fullCardNumber: '4563 5100 9876 5432 101'
		},
		{
			BankCardName: "中国农业银行",
			BankCardType: "信用卡",
			bgColor: "#27AE60",
			iconUrl: `${ImgBaseUrl}IndustrialBankLogo.png`,
			fullCardNumber: '9559 9800 1234 5678 902'
		},
	])
	const queryCardNum = (index) => {
		currentCardIndex.value = index;
		currentCardNumber.value = BankCardList.value[index].fullCardNumber;
		CardNumPopup.value.open();
	}
	// 复制卡号功能
	const copyCardNumber = () => {
		uni.setClipboardData({
			data: currentCardNumber.value.replace(/\s+/g, ''), // 移除空格
			success: () => {
				uni.showToast({
					title: '卡号已复制',
					icon: 'success'
				});
				CardNumPopup.value.close(); // 复制后关闭弹窗
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}

	const dialogInputConfirm = (value) => {
		uni.showToast({
			title: `查看卡号: ${BankCardList.value[currentCardIndex.value].BankCardName} 的完整卡号`,
			icon: 'none'
		})
	}
	const queryBankBill = () => {
		uni.navigateTo({
			url: "/pages/personalCenter/Universal/BankBill",
		});
	}
	const BandCardManage = (() => {
		uni.navigateTo({
			url: "/pages/personalCenter/Universal/BankCardManage",
		});
	})
    const addBankCard = (() => {
		uni.navigateTo({
			 url: "/pages/tabBars/account/addCard",
		});
	})
	onMounted(() => {
		// 可以在这里添加数据加载逻辑
	})

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped lang="scss">
	.contract {
		height: 100vh;
		background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 100%);

		.navbar {
			width: 100%;
		}

		.back {
			width: 44rpx;
			height: 44rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 50%;
		}

		.content {
			padding: 20rpx;
			box-sizing: border-box;
			height: calc(100% - 100rpx); // 减去导航栏高度

			.title-box {
				margin-bottom: 30rpx;

				.title-text {
					color: #303133;
					font-size: 36rpx;
					font-weight: 500;
				}

				.title-text2 {
					color: #999;
					font-size: 24rpx;
				}
			}

			.BankCard-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 20rpx; // 卡片间距
			}

			.BankCard-bg {
				width: 100%;
				height: 215rpx;
				background: #FF6266;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.card-content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.card-content-top {
						display: flex;

						.bankLogo-box {
							height: 100%;
							width: 100rpx;

							.bank-icon {
								width: 74rpx;
								height: 74rpx;
							}
						}

						.card-content-top-rt {
							width: 100%;


							.bank-name-box {
								display: flex;
								justify-content: space-between;

								.bank-name {
									color: #fff;
									font-size: 32rpx;
									font-weight: 500;
								}

								.card-number {
									color: #fff;
									font-size: 32rpx;
									font-weight: 500;
								}
							}


							.card-type {
								color: rgba(255, 255, 255, 0.8);
								font-size: 28rpx;
							}
						}

					}


					.Divider {
						width: 100%;
						border: 0.5rpx solid #FF8B8E;
					}

					.bankContent-bottom {
						width: 100%;
						display: flex;
						justify-content: space-around;
						align-items: center;

						.bankContent-bottom-text-Divider {
							height: 20rpx;
							border: 1rpx solid #FF8B8E;
						}

						.bankContent-bottom-text {
							width: 30%;
							display: flex;
							justify-content: space-around;
							align-items: center;
							font-size: 28rpx;
							color: #FFFFFF;
							font-weight: 400;
						}
					}
				}
			}

			.addBankCard {
				width: 100%;
				height: 88rpx;
				background: #2F80ED;
				border-radius: 44rpx;
				color: #fff;
				font-size: 30rpx;
				margin-top: 100rpx;
				line-height: 88rpx;

			}
		}
	}

	.popup-content {
		width: 547rpx;
		height: 323rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 0rpx;
		box-sizing: border-box;
		flex-direction: column;

		.text {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}

		.text2 {
			font-size: 32rpx;
			color: #333333;
			font-weight: normal;
		}

		.copyCardNum {
			color: #fff;
			width: 496rpx;
			height: 68rpx;
			background: #2F80ED;
			border-radius: 44rpx;
			line-height: 68rpx;
		}
	}
</style>